<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$.ajax({ 
				type: "GET",
				url: "/cnarea/list", 
				success: function(data){
					//json=eval("("+data+")");//将数据转成json格式
					$.each(data,function(i,item){
					    var option = $("<option></option>").val(item.id).text(item.shortName);  
                		$(".prov").append(option);
					});
		      	}
		    });
		    $(".prov").change(function(){
		      $(".city").empty();
		      var selectValue=$("select[class='prov']").val();
			  $.ajax({ 
				type: "GET",
				url: "/cnarea/query",
				data:{level:1,id:selectValue}, 
				success: function(data){
					//json=eval("("+data+")");//将数据转成json格式
					$.each(data,function(i,item){
					    var option = $("<option></option>").val(item.id).text(item.shortName);  
                		$(".city").append(option);
					});
		      	}
		    	});
			});
			$(".city").change(function(){
		      $(".dist").empty();
		      var selectValue=$("select[class='city']").val();
			  $.ajax({ 
				type: "GET",
				url: "/cnarea/query",
				data:{level:2,id:selectValue}, 
				success: function(data){
					//json=eval("("+data+")");//将数据转成json格式
					$.each(data,function(i,item){
					    var option = $("<option></option>").val(item.id).text(item.shortName);  
                		$(".dist").append(option);
					});
		      	}
		    	});
			});
			$(".dist").change(function(){
		      $(".a").empty();
		      var selectValue=$("select[class='dist']").val();
			  $.ajax({ 
				type: "GET",
				url: "/cnarea/query",
				data:{level:3,id:selectValue}, 
				success: function(data){
					//json=eval("("+data+")");//将数据转成json格式
					$.each(data,function(i,item){
					    var option = $("<option></option>").val(item.id).text(item.shortName);  
                		$(".a").append(option);
					});
		      	}
		    	});
			});
			$(".a").change(function(){
		      $(".b").empty();
		      var selectValue=$("select[class='a']").val();
			  $.ajax({ 
				type: "GET",
				url: "/cnarea/query",
				data:{level:4,id:selectValue}, 
				success: function(data){
					//json=eval("("+data+")");//将数据转成json格式
					$.each(data,function(i,item){
					    var option = $("<option></option>").val(item.id).text(item.shortName);  
                		$(".b").append(option);
					});
		      	}
		    	});
			});
		});
    </script>
</head>
<body>
<h1 th:text="${host}">Hello World</h1>
	<select class="prov"></select>   
    <select class="city"></select>  
    <select class="dist"></select>
    <select class="a"></select>
    <select class="b"></select>
</body>
</html>